<!-- ？？？ -->


<template>
  <div id="myExam">
    <div class="title">AI智能出题</div>
    <div class="wrapper">
      <ul class="top">
        <li>
          <i class="el-icon-a-041" style="font-size: 20px;"> 题目列表</i>
        </li>

        <li>
            <p>科目：</p>
            <el-select v-model="subject" clearable placeholder="请选择" class="small-select">
                <el-option
                v-for="item in subOptions"
                :key="item.value"
                :label="item.value"
                :value="item.value">
                </el-option>
            </el-select>
        </li>
        <li>
            <p>难度：</p>
            <el-select v-model="difficulty" clearable placeholder="请选择" class="small-select">
                <el-option
                v-for="item in difOptions"
                :key="item.value"
                :label="item.value"
                :value="item.value">
                </el-option>
            </el-select>
        </li>
        <li>
            <p>题目数量：</p>
            <el-input v-model="count" class="small-select" placeholder="至少>=3"></el-input>
        </li>
        <li><el-button type="primary" @click="setQuestion()" icon="el-icon-magic-stick">AI智能出题   </el-button></li>
      </ul>
      <ul>
        <div class="container">
            <div class="centered-content">
                <p>进度：</p>
                <el-progress :percentage="percentage"></el-progress>
            </div>
        </div>
      </ul>
      <ul class="paper" v-if="showList">
        <li class="item" v-for="(item,index) in pagination" :key="index" @click="toExamMsg(item)">
          <h4>{{item.question}}</h4>
          <p class="name">分数：{{ item.score }}</p>
          <p class="name">更新时间：{{ item.updateTime.substr(0, 10) }}</p>
        </li>
      </ul>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[6, 10, 20, 40]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
      <el-dialog title="答题板" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="考试题目">
            <el-input v-model="form.title" :readonly="true"></el-input>
          </el-form-item>
          <el-form-item label="作答内容">
            <el-input type="textarea" v-model="form.text" :rows="10"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit()">提 交</el-button>
        </div>
        <div v-if="showDisplay">
          <!-- 这里放置你要展示的内容 -->
          <el-card class="box-card">
            <br> 分数：{{score}}<br>
            <br>答案：<br>
            {{form.answer}}
            <br>解析：<br>
            {{form.analysis}}
          </el-card>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      pagination: { //分页信息
        current: 1, //当前页
        total: null, //记录条数
        size: 6, //每页条数
        records: [],
        pages: '',
      },
      showDisplay:false,
      subject:'',
      subOptions: [
            { value: '地理'},
            { value: '历史'},
            { value: '英语'},
            { value: '语文'},
        ],
      difficulty:'',
      difOptions: [
            { value: '简单'},
            { value: '中等'},
            { value: '困难'},
        ],
      count:'',
      percentage: 0,
      showList:false,
      dialogFormVisible: false,
      form: {
        id:null,//试卷id
        answer: '',
        text: '',
        title: '',
        analysis:'',
      },
      score:null,
    }
  },
  created() {
    this.getAiQuestionInfo();
    this.loading = true;
    console.log(this.pagination.current, this.pagination.size);
  },
  methods: {
    //改变当前记录条数
    handleSizeChange(val) {
      this.pagination.size = val
      this.getExamInfo()
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getExamInfo()
    },


    increasePercentage() {
        const intervalId = setInterval(() => {
        if (this.percentage < 99) {
            this.percentage += 1;
        } else {
            clearInterval(intervalId);
        }
        }, 200);
    },
    async sendDataToServer() {
    try {
        // 准备发送的数据
        const dataToSend = {
            subject: this.subject,
            difficulty:this.difficulty,
            count:this.count
        };
        // 发送 POST 请求到端口 8081
        const response = await fetch('http://localhost:8081/history-question-by-ai', {
        method: 'POST', // 注意这里改为 POST 请求
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
        });

        // 解析服务器返回的响应数据
        const data = await response.json();

        console.log('从服务器接收到的信息：', data);
        if (data != null) {
            this.percentage=100;
            this.showList=true;
            this.pagination = data.data;
        }
        } catch (error) {
            // 处理错误
            console.error('发送数据时出错：', error);
        }
    },


    setQuestion(){
        if(this.subject===''){
            return this.$message.error('请选择科目！');
        }
        if(this.difficulty===''){
            return this.$message.error('请选择题目难度！');
        }
        if(this.count===''){
            return this.$message.error('请输入题目数量！');
        }
        else if(this.count<3){
            return this.$message.error('题目数量小于3，请重新输入！');
        }
        this.$message.success('AI正在努力出题中，请稍候！');
        this.percentage=0;
        this.increasePercentage();
        this.sendDataToServer();
    },

      //跳转到试卷详情页
      toExamMsg(exam) {
          /* this.$router.push({
             path: "/exam",
             query: {question: exam.question,
             id:exam.id},
           });

           */
          this.form.id=exam.id;
          this.form.analysis=exam.analysis;
          this.form.answer=exam.answer;
          this.form.title=exam.question;
          this.dialogFormVisible = true;
      },
      onSubmit() {
          this.sendExam();
          // 提交表单后显示展示栏
          this.showDisplay = true;
      },
      async sendExam() {
          try {
              // 准备发送的数据
              const dataToSend = {
                  id: this.form.id,
                  myAnswer: this.form.text, // 表单
              };
              // 发送 GET 请求到端口 8081
              const response = await fetch('http://localhost:8081/history-question-by-ai?id=' + dataToSend.id + '&myAnswer=' + encodeURIComponent(dataToSend.myAnswer), {
                  method: 'GET', // 注意这里改为 GET 请求
                  headers: {
                      'Content-Type': 'application/json'
                  }
              });

              // 解析服务器返回的响应数据
              const data = await response.json();

              console.log('从服务器接收到的信息：', data.data.score);//接收data
              this.score=data.data.score;

          } catch (error) {
              console.error('发送请求时出错：', error);
          }
      },

  }
}
</script>


<style lang="less" scoped>
.pagination {
  padding: 20px 0px 30px 0px;
  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
.paper {
  h4 {
    cursor: pointer;
  }
}
.paper .item a {
  color: #000;
}
.wrapper .top .order {
  cursor: pointer;
}
.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.item .info i {
  margin-right: 5px;
  color: #0195ff;
}
.item .info span {
  margin-right: 14px;
}
.paper .item {
  width: 380px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
  transition: all 0.6s ease;
}
.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}
.paper .item .info {
  font-size: 14px;
  color: #88949b;
}
.paper .item .name {
  font-size: 14px;
  color: #88949b;
}
.paper * {
  margin: 20px 0;
}
.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}
.top .icon {
  position: relative;
}
.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
#myExam .search-li {
  margin-left: auto;
}
.top .search-li {
  margin-left: auto;
}
.top li {
  display: flex;
  align-items: center;
}
.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}
.wrapper .top {
  display: flex;
}
.wrapper .top li {
  margin: 20px;
}
#myExam {
  width: 980px;
  margin: 0 auto;
}
#myExam .title {
  margin: 20px;
}
#myExam .wrapper {
  background-color: #fff;
}
.wrapper .top .order {
  cursor: pointer;
}
.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.item .info i {
  margin-right: 5px;
  color: #0195ff;
}
.item .info span {
  margin-right: 14px;
}
.paper .item {
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
  transition: all 0.6s ease;
}
.item {
  cursor: pointer;
}
.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45)
}
.paper .item .info {
  font-size: 14px;
  color: #88949b;
}
.paper .item .name {
  font-size: 14px;
  color: #88949b;
}
.paper * {
  margin: 20px 0;
}
.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}
.top .icon {
  position: relative;
}
.wrapper .top {
  border-bottom: 1px solid #eee;
}
#myExam .search-li {
  margin-left: auto;
}
.top .search-li {
  margin-left: auto;
}
.top li {
  display: flex;
  align-items: center;
}
.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}
.wrapper .top {
  display: flex;
}
.wrapper .top li {
  margin: 20px;
}
#myExam {
  width: 980px;
  margin: 0 auto;
}
#myExam .title {
  margin: 20px;
}
#myExam .wrapper {
  background-color: #fff;
}
.small-select{
  width: 120px; /* 设置宽度 */
  height: 32px !important; /* 设置高度 不起作用？ */
}
.container {
    display: flex;
    justify-content: center;
}

.centered-content {
    width: 80%;
    text-align: center;
}
</style>
